<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
  <head>
    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script type="text/javascript" src='/javascripts/jquery-1.8.2.min.js'></script>
    <script type="text/javascript" src='/javascripts/echarts.js'></script>
    <script type="text/javascript" src='/javascripts/charts.js'></script>

    <style>
      .query{
        width: 500px;
        height: 20px;
      }
      .btn_query{
        height: 25px;
      }
    </style>
  </head>
  <body>
    <h1><%= title %></h1>

    <input type="text" class="query" name="mongo_query" id="mongo_query" value="{'count_time':{$gt: time}}" placeholder="请输入查询条件"/>
    <button class="btn_query" onclick="chart_bar();">查询</button>
    </br>
    <div style="height: 300px; width: 600px" id="main"></div>
    <br/>
    <h1>根据ID统计</h1>
    <br/>
    输入索引:<input type="text" id="esIndex" value="uecp_*_trace_bsmessage*" placeholder="格式:uecp_*_trace_bsmessage*"><br/>
    输入关键词:<input type="text" id="searchkey" value="doc.id:112836" placeholder="格式:doc.id:112813"><br/>
    <button onclick="countEs();">查询</button>
    <div style="height: 300px; width: 600px" id="elk_id"></div>

    <p id="countEs"></p>

    <script type="text/javascript">
      $(document).ready(function () {
        //chart_bar();
      });

      function chart_bar() {
        var url = '/chart_bar';
        var mongo_query = $('#mongo_query').val();
        $.getJSON(url,{mongo_query: mongo_query,r:Math.random()}, function (data) {
          console.log(data)
          var formatValue = formateArray(data);
          var option = areaSimple(formatValue.xAxis, formatValue.data);
          myCharts(option, 'main');
        });
      }

      function countEs() {
        if (!elk_validata) return false;
        var url = '/count_es';
        $.getJSON(url,{esIndex: $("#esIndex").val(),searchkey:$("#searchkey").val()}, function (data) {
          console.log(data)
          $("#elk_id").html(JSON.stringify(data));
          //var formatValue = formateArray(data);
         /* var sericeData = new Array();
          for (var i = 0; i < data.length; i++) {
            sericeData.push({value:data[i].count_value,name:data[i].countKey});
          }*/
          //var option = bar(formatValue.xAxis, formatValue.data);
          //myCharts(option, 'elk_id');

        });
      }

      function elk_validata() {
        var elk_id = $("#searchkey").val();
        if (elk_id == null || elk_id == "") {
          alert("请输入ELK查询ID");
          return false;
        }

        var elk_index = $("#esIndex").val();
        if (elk_index == null || elk_index == "") {
          alert("请输入ELK查询索引");
          return false;
        }
        return true;
      }
    </script>
  </body>
</html>
